<template>
	<div class="recommend-detail">
		<div class="index-banner">
			<swiper :data="data.banner" v-if="data.banner" :option="options" img-key="pic"></swiper>
		</div>
		<div class="">
			<van-tabs swipeable>
				<van-tab v-for="(i,index) in screen_title" :key="index">
					<div slot="title" class='ellipsis' @click="loadInitScreenData(i)">{{ i.name }}</div>
					<ul class="shop-list layout flex-w w92 auto mb25">
						<router-link tag="li" :to="'/detail?id='+item.crow_id" class="w48 mt15" v-for="(item,index) in data.goods" :key="index">
							<img class="responsive-img img-bg" style="height:10rem;" :src="item.img" alt="">
							<p class='mt15 ellipsis c333 fs14'>{{ item.goods_name }}</p>
							<p class="mt5 ellipsis c666 fs12">{{ item.introduction }}</p>
							<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
							<div class="layout">
								<p><span class="fs12 subject">￥</span><strong class="fs18 subject">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
								<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
							</div>
						</router-link>
					</ul>
				</van-tab>
			</van-tabs>
		</div> 
	</div>
</template>

<script>
	import Swiper from '@/components/Swiper';
	import { Tab, Tabs,Progress } from 'vant';
	export default{
		components: {
			Swiper,
			Tab,
			Tabs,
			Progress
		},
		data()
		{
			return{
				data        : [],
				sort        : 0,
				options     : {
					autoplay : 3000
				},
				screen_title  			: [{name:'综合排序',sort:0},{name:'即将结束',sort:3},{name:'金额最多',sort:1},{name:'人数最多',sort:4}],
			}
		},
		created()
		{
			this.loadData();
		},
		methods:
		{
			loadData()
			{
				let params = {
					id : this.$route.query.id,
					sort : this.sort,
				}
				this.$http.get('/goods/special',{ params : params }).then( res=> {
					this.data = res.data
				})
			},
			loadInitScreenData(item)
			{
				this.sort = item.sort;
				this.data = [];
				this.loadData();
			}
		}
	}
</script>

<style lang="less">
	.recommend-detail{
		.index-banner{
			.van-swipe-item{
				img{
					height: 10rem;
				}
			}
		}
	}
</style>